<template>
  <div>
    
    <div class="tabal" :style="{paddingTop: systemBarHeight + 'px'}">
		<div style="display: flex;">
      <div
        class="selecttab"
        :class="{ active: item.current === current }"
        v-for="(item, index) in tabs"
        :key="index"
        @click="transform(item.current)"
      >
        {{ item.name }}
		<div :class="{ henx: item.current === current }"></div>
      </div>
	  </div>
	   <div class="addshuimg" @click="gotoShare"><image mode="aspectFit" :src="addshu"></image></div>
    </div>
	<div style="overflow: auto;background-color: rgb(243 243 243);">
			 <div  v-if="current==1"><allsetar></allsetar></div>
			  <div v-if="current==2"><follow></follow></div>
			   <div v-if="current==3"><Recommended></Recommended></div>
		 </div>
  </div>
</template>

<script>
	import Sqlite from '@/utils/sqlex.js'
import upper from "@/components/upper.vue";
import allsetar from "./components/allsetar.vue";
import follow from "./components/follow.vue";
import Recommended from "./components/Recommended.vue";

export default {
  components: {
    upper,
    allsetar,
    follow,
    Recommended
  },
  data() {
    return {
		// 系统状态栏的高度
		addshu:require('@/static/addshu.png'),
					systemBarHeight: 0,
      tabs: [
        { name: "全部", current: 1 },
        { name: "关注", current: 2 },
        { name: "推荐", current: 3 }
      ],
      current: 1
    };
  },
  created() {
  		this.getSysteminfo();
  	},
	onShow() {
		
	},
  methods: {
	  anniu(){
	var options = {cover:false};  
	var str = dateToStr(new Date());  
	str += ": 欢迎使用Html5 Plus创建本地消息！";  
	plus.push.createMessage(str, "LocalMSG", options);  

	  },
	  gotoShare(){
		  console.log("触发")
		  uni.navigateTo({
		   url: '/pages/Share/index' // 注意路径格式  
		  });
	  },
	  getSysteminfo() {
	  			uni.getSystemInfo({
	  				success: res => {
	  					this.systemBarHeight = res.statusBarHeight+10; 
	  				}
	  			});
	  		},
    transform(e) {
      // 更新 current 的值为 e
      this.current = e;
    }
  }
};
</script>
<style lang="less" scoped>
	.addshuimg{
		  display: flex;
		      flex-direction: row-reverse;
		      margin-right: 1.6rem;
		      align-items: center;
			uni-image{
			width: 1.7rem !important;
			height: 1.7rem !important;	
			}
	}
	.henx{
		border-radius: 0.2rem;
		    height: 0.2rem;
		    width: 2rem;
		    background: #000;
		    position: absolute;
		    left: 0.7rem;
			margin-top: 0.2rem;
	}
	.tabal{
		z-index: 9;
		width: 100%;
		position: sticky;
		top: 0px;
		    background: linear-gradient(to bottom right, #edede0, #dcf1ff);
		padding-bottom: 3rem;
	display: flex;
	    height: 2rem;
		    justify-content: space-between;
	.selecttab {
		white-space:nowrap;
		    margin-left: 1rem;
		    font-size: 1.7rem;
		    font-weight: 500;
    display: flex;
    align-items: center;
	color: #959595;
}
.active{
	 position: relative;
	  display: inline-block; 
	color: #000;
}
}
</style>